<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:devlive="http://dev.live.com">
<head>
    <title>Photo Bug Blog</title>
    <!-- needed for Windows Live Contacts & Spaces control -->

    <script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/live.js"></script>
    <script type="text/javascript" src="http://controls.services.live.com/scripts/base/v0.3/controls.js"></script>    

    <!-- needed for Virtual Earth -->
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
    
    <script type="text/javascript" src="layout.js"></script>
    <script type="text/javascript">
            var _pushPinCounter = 0;
            var _contactCounter = 0;
            var _previewPushpinId = null;
            var _pushPinMax = 10000;

            var _map = null;                  
            var _regexp = "!!Posted from Lat:(.*) Lon:(.*) Address:(.*)!!";

            var _aSelectedPhotos = {};
            
            // ================================================================
            // This is the small chunk of code called when the page boots up
            // ================================================================
            function bootstrap() {
                _map  = new VEMap('blogmap');
                _map.LoadMap();
                _map.SetMapStyle(VEMapStyle.Hybrid);
            }
            
            // ================================================================
            // This is the chunk of code for the read scenario.
            // It essentially receives RSS feeds and calls plotRss to get it parsed.
            // ================================================================
            function receiveData(p_contacts) {
                _map.DeleteAllPushpins();
                _contactCounter = 0;
                _pushPinCounter = 0;
                
                for (var i = 0; i < p_contacts.length; i++) {
                    
                    if (p_contacts[i].name !== null && typeof p_contacts[i].name !== "undefined" && 
                        p_contacts[i].spacesRssContent !== null && typeof p_contacts[i].spacesRssContent !== "undefined") {
                            plotRss(p_contacts[i].name, p_contacts[i].spacesRssContent);
                    }                    
                }

                //center the visible map
                var locs=[];
                for (var i=0;i<_map.pushpins.length; i++){
                    locs.push(_map.pushpins[i].LatLong);
                }
                if (locs.length>0) {
                    _map.SetMapView(locs);
                }
            }
            
            function plotRss(strName, strRss) {
                var strIcon = null;
                var strTitle = null;
                var strLink = null
                var strDescription = null;
                var strDate = null;
                var strLatitude = null;
                var strLongitude = null;

                _contactCounter ++; // identify icon for this user
                if (_contactCounter > 12) { strIcon = "./images/bug_flag.gif"; } else { strIcon = "./images/bug_flag" + _contactCounter + ".png"; }
    
                if (window.ActiveXObject)
                {
                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async="false";
                    xmlDoc.loadXML(strRss);
                }
                else
                {
                    var parser = new DOMParser();
                    xlmDoc = parser.parseFromString(
                        strRss,
                        "text/xml"
                    );
                }
                var items = xmlDoc.getElementsByTagName('item');
                
                for(var i = 0; i < items.length; i ++) {
                    
                    if (walkDownOneNode(items[i], 'live:type') == 'blogentry') {
                        strTitle = walkDownOneNode(items[i], 'title')
                        strLink = walkDownOneNode(items[i], 'link')
                        strDescription = walkDownOneNode(items[i], 'description')
                        strDate = walkDownOneNode(items[i], 'pubDate')
                        var re = new RegExp(_regexp);
                        var m = re.exec(strDescription);
                        if (m != null) {
                            strLatitude = m[1];
                            strLongitude = m[2];

                            plotBlog(
                                strTitle,
                                strName,
                                strLatitude, 
                                strLongitude, 
                                strLink, 
                                strDescription, 
                                strDate, 
                                strIcon);
                        }
                    }
                }
            }
            
            function plotBlog(title, name, latitude, longitude, link, description, date, icon) {
                try {
                    if (_pushPinCounter < _pushPinMax) {
                        var pin = new VEPushpin(
                            _pushPinCounter, 
                            new VELatLong(latitude, longitude),
                            icon,
                            myEscape(title),
                            myEscape(name + "<br />" + date + "<br />" + description)
                        );
                        _map.AddPushpin(pin);
                        _pushPinCounter ++;
                        return _pushPinCounter-1;
                    }
                }
                catch (e) {
                }
            }

            function myEscape(str) {
                str = unescape(str).replace(/&lt;/g, '<').replace(/&gt;/g, '>');
                str = escapeReplacementFilter(str);
                return str;
            }
            
            function escapeReplacementFilter(strSrc) {
            
                // this function uses regular expression to extract all tags and remove active ones.
                // in some cases, specific attributes are removed as well. a whitelist approach is used.
                // if src or href attributes have javascript: in it, it will be replaced with http:

                var patTag = "<(/)?([A-Za-z]+)( [^>]+ )?(/)?>";
                var patAttribute = "([A-Za-z]+)=([\"|'][^\"' >]+[\"|']|[^\"' >]+)";

                var reTags = new RegExp(patTag, "g");
                var foundTag = strSrc.match(reTags);
                var foundTagDetails;
                var foundAttributes;
                var foundAttributesDetails;
                var strReplace;
                if (foundTag == null) {
                    return strSrc;
                } else {   
                    for (var i = 0; i < foundTag.length; i ++) {
                        foundTagDetails = foundTag[i].match(patTag);
                        strReplace = null;
                        if (foundTagDetails != null) {
                            if (foundTagDetails[2].toLowerCase() == "img" || 
                                foundTagDetails[2].toLowerCase() == "br" ||
                                foundTagDetails[2].toLowerCase() == "a" ||
                                foundTagDetails[2].toLowerCase() == "blockquote" ||
                                foundTagDetails[2].toLowerCase() == "div" ||
                                foundTagDetails[2].toLowerCase() == "p") {
                                strReplace = "<" + foundTagDetails[1] + foundTagDetails[2]; 

                                var reAttributes = new RegExp(patAttribute, "g");
                                foundAttributes = foundTag[i].match(reAttributes);
                                if (foundAttributes != null) {
                                    for (var j = 0; j < foundAttributes.length; j ++) {
                                        foundAttributesDetails = foundAttributes[j].match(patAttribute);
                                        if (foundAttributesDetails != null) {
                                            if (foundAttributesDetails[1] == "src" ||
                                                foundAttributesDetails[1] == "href" ||
                                                foundAttributesDetails[1] == "style" ||
                                                foundAttributesDetails[1] == "width" ||
                                                foundAttributesDetails[1] == "height" ||
                                                foundAttributesDetails[1] == "border" ||
                                                foundAttributesDetails[1] == "alt" ||
                                                foundAttributesDetails[1] == "title") {
                                                strReplace = strReplace + 
                                                    " " + 
                                                    foundAttributesDetails[1] + 
                                                    "=" + 
                                                    foundAttributesDetails[2].replace(/javascript:/,"http:");
                                            }
                                        }
                                    }
                                }
                                strReplace = strReplace + " " + foundTagDetails[4] + ">";
                                strSrc = strSrc.replace(foundTagDetails[0], strReplace);
                            } else {
                                strSrc = strSrc.replace(foundTagDetails[0], '');
                            }
                        }
                    } 
                }
                return strSrc;
            }
            
            // ================================================================
            // This is the chunk of code for the post scenario.
            // It essentially gets the necessary information and opens a new window
            // (or creates a preview pushpin).
            // ================================================================
            function previewBlog() {
                var latlong = _map.GetCenter(); 
                
                if (_previewPushpinId != null) {
                    _map.DeletePushpin(_previewPushpinId);
                }
                _previewPushpinId = 
                    plotBlog(
                        _elBlogTitle.value, 
                        "YOU",
                        latlong.Latitude,
                        latlong.Longitude,
                        window.location, 
                        _elBlogDescription.value + 
                            getUnescapedPhotoDescription() + 
                            "<BR />!!Posted from Lat:" + latlong.Latitude +
                                " Lon:" + latlong.Longitude +
                                " Address:'" + _elBlogLocation.value + "'!!",
                        Date(), 
                        "./images/bug_flag_light.gif");
            }
            
            function postBlog() {
                var latlong = _map.GetCenter(); 
                window.open(
                    "http://spaces.live.com/blogit.aspx?" + 
                    "Title=" + encodeURIComponent(_elBlogTitle.value) + 
                    "&" +
                    "Description=" + 
                        encodeURIComponent(
                            _elBlogDescription.value + getUnescapedPhotoDescription() + 
                            "<BR />!!Posted from Lat:" + latlong.Latitude +
                                " Lon:" + latlong.Longitude +
                                " Address:'" + _elBlogLocation.value + "'!!") +
                    "&" +
                    "SourceURL=" + window.location +
                    "");            
            }

            function receivePhoto(p_items) {
                _aSelectedPhotos = p_items;
                document.getElementById('photoReceived').innerHTML = p_items.length + " received.";
            }
            
            function getUnescapedPhotoDescription() {
                var sPhoto = '';
                for (var i = 0; i < _aSelectedPhotos.length; i++) {
                    for (var j in _aSelectedPhotos[i]) {
                        sPhoto += "<br />" +
//                            "<a href='" +
//                            _aSelectedPhotos[i][j] + 
//                            "'>" +
                            "<img src='" + 
                            _aSelectedPhotos[i][j] + 
                            "' style='width:100px' />" +
//                            "</a>" +
                            "<br />";
                    }
                }
                return sPhoto;
            }
    </script>
</head>
<body onload='bootstrap(); bootstrap_layout();' style="color:#2758B4;font-family:Verdana;">
    <table style="width:100%;">
        <tr>
            <td id='pagetitle' 
                style=
                    "vertical-align:middle;
                    background-image:url('images/header_background.gif')">

                <img 
                    class='pagetitleLogo' 
                    title='photo bug blog'
                    alt='photo bug blog'
                    src='images/pbb_logo.gif' />

                <iframe 
                    id="AuthLite" 
                    src="about:blank"
                    marginwidth="15" 
                    marginheight="5"
                    width="100px";
                    height="30px";
                    frameborder="0" 
                    scrolling="no" 
                    style="position:absolute"> 
                <!-- 
                    this iframe would be used to do single signon for all Windows Live web controls
                    once it is turned on in the production Windows Live cluster.
                    please look forward to using this in the VERY near future.
                    to enable this, you will need to rename this file to become an aspx page (to POST to), and
                    set the iframe src to "http://login.live-int.com/gadgets/AuthLite.htm?appid=0016000080001ED9".
                    for the appid above to work, this mashup must be deployed to                     
                    http://localhost/traveljournal 
                -->
                </iframe>
            </td>
        </tr>
        <tr style="width:100%;">
            <td style="background-color:#D9E4EB;">
                
                <table>
                    <tr>
                        <td style="padding:20px;width:100%">
                            <div 
                                id='blogmap'
                                style="position:relative;width:635px;height:635px">
                            </div>
                        </td>
                        <td style="padding:20px 20px 20px 0px;width:200px;height:200px">
                            <div
                                id='blogtop'
                                style="position:relative;display:block;">
                                <img id='postbutton'
                                    title="blog your latest trip"
                                    alt="blog your latest trip"
                                    src='images/blog_trip_button.gif' 
                                    onclick='showPost();'
                                    onmouseout="document.getElementById('postbutton').src='images/blog_trip_button.gif'"
                                    onmouseover="document.getElementById('postbutton').src='images/blog_trip_button_rollover.gif'" />
                                <br />
                                <img id='readbutton'
                                    title="See your friend's travel post"
                                    alt="See your friend's travel post"
                                    src='images/see_friends_button.gif' 
                                    onclick='showRead();'                                    
                                    onmouseout="document.getElementById('readbutton').src='images/see_friends_button.gif'"
                                    onmouseover="document.getElementById('readbutton').src='images/see_friends_button_rollover.gif'" />
                                <br />
                            </div>

                            <div
                                id='blogread'
                                style="display:none;">
                                <img id='blogreadback'
                                    title="Back"
                                    alt="Back"
                                    src='images/back.png'
                                    onclick='showTop();'
                                    onmouseout="this.src='images/back.png'"
                                    onmouseover="this.src='images/back_rollover.png'" />
                                <img src='images/your_friends_title.gif'
                                    title="Your friend's posts"
                                    alt="Your friend's posts" /><br />
                                <span style="font-size:small">
                                    To read, (i)sign in, (ii)select friends, and (iii)click 'Send selected contacts'.
                                </span>
                                <devlive:contactscontrol 
                                    id="ContactsControl"
                                    style="border:solid 1px black;float:left;width:100%;height:400px;"
                                    devlive:privacyStatementURL="http://g.msn.com/2privacy/enus"
                                    devlive:market="en"
                                    devlive:dataDesired="name,spacesrsscontent"
                                    devlive:onData="receiveData"
                                    devlive:channelEndpointURL="channel.htm" 
                                ></devlive:contactscontrol>
                            </div>

                            <div
                                id='blogpost'
                                style="display:none;">
                                <img id='blogpostback' 
                                    title="Back"
                                    alt="Back"
                                    src='images/back.png'
                                    onclick='showTop();'
                                    onmouseout="this.src='images/back.png'"
                                    onmouseover="this.src='images/back_rollover.png'" />
                                    
                                <img src='images/blog_your_title.gif'
                                    title="Blog your latest trip"
                                    alt="Blog your latest trip" />
                                <br />
                                Location:<br />
                                <textarea 
                                    id="bloglocation" 
                                    title="enter address, state, country, etc."
                                    cols='34'
                                    rows='1'
                                    style="width:100%"
                                    onchange="_map.FindLocation(document.getElementById('bloglocation').value);"></textarea>

                                Title:<br />
                                <textarea
                                    id="blogtitle" 
                                    cols='34'
                                    rows='1'
                                    title="enter the incident name"
                                    style="width:100%;"></textarea>
                                
                                Blog:<br />
                                <textarea 
                                    id="blogtext"
                                    cols='34'
                                    rows='4'
                                    title="enter your blog text"
                                    style="width:100%;height:42px"></textarea>

                                Photos:<span id="photoReceived"></span><br />
                                <span style="font-size:small">
                                    To add photos from spaces, (i)sign in, (ii)select the photos, and (iii)click 'Send selected photos'.
                                </span>
                                <devlive:spacescontrol 
                                    id="SpacesControl"
                                    style="border:solid 1px black;float:left;width:100%;height:300px;"
                                    devlive:privacyStatementURL="http://g.msn.com/2privacy/enus"
                                    devlive:market="en"
                                    devlive:dataDesired="fileAccessControlledURL"
                                    devlive:onData="receivePhoto"
                                    devlive:channelEndpointURL="channel.htm" 
                                ></devlive:spacescontrol>
                                <br />
                                <img src='images/preview_button.gif'
                                    title='Preview'
                                    alt='Preview'
                                    onclick='previewBlog();'
                                    onmouseout="this.src='images/preview_button.gif'"
                                    onmouseover="this.src='images/preview_button_rollover.gif'" />
                                <img src='images/submit_button.gif'
                                    title='Submit'
                                    alt='Submit'
                                    onclick='postBlog();'
                                    onmouseout="this.src='images/submit_button.gif'"
                                    onmouseover="this.src='images/submit_button_rollover.gif'" />
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
